﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link href="../plugins/swiper/swiper.min.css" rel="stylesheet" />
    <!-- Demo styles -->
    <style>
        html, body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image: url('../img/bigImage/bg1.jpg');">Slide 1</div>
            <div class="swiper-slide"style="background-image: url('../img/bigImage/bg2.jpg');">Slide 2</div>
            <div class="swiper-slide" style="background-image: url('../img/bigImage/bg3.jpg');">Slide 3</div>
            <div class="swiper-slide" style="background-image: url('../img/bigImage/bg4.jpg');">Slide 4</div>
            <div class="swiper-slide" style="background-image: url('../img/bigImage/bg5.jpg');">Slide 5</div>
            <div class="swiper-slide" style="background-image: url('../img/bigImage/bg6.jpg');">Slide 6</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <!-- Swiper JS -->
    <script src="../plugins/swiper/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            initialSlide: 1,//初始索引
            direction: "horizontal",  //horizontal  vertical  垂直切换还是水平切换
            speed: 1000,  //滑动速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
            grabCursor: true,   //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
            //  virtualTranslate:true,
            centeredSlides: true,  //设定为true时，active slide会居中，而不是默认状态下的居左。
            slidesOffsetBefore: 100,  //设定slide与左边框的预设偏移量
            slidesOffsetAfter: 100,   ////设定slide与右边框的预设偏移量
            freeMode: true, //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。

            loop:true,  //会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。 
            // loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。
            loopFillGroupWithBlank: true,  //在loop模式下，为group填充空白slide
            slideToClickedSlide:true, //设置为true则点击slide会过渡到这个slide。
            //响应式设置
            breakpoints: { 
                //当宽度小于等于320
                320: {
                    slidesPerView: 1,
                    spaceBetween: 10
                },
                //当宽度小于等于480
                480: { 
                    slidesPerView: 2,
                    spaceBetween: 20
                },
                //当宽度小于等于640
                640: { 
                    slidesPerView: 3,
                    spaceBetween: 30
                }
            },
            slidesPerView: 3, // 设置slider容器能够同时显示的slides数量(carousel模式)。
            slidesPerGroup: 3,   //在carousel mode下定义slides的数量多少为一组。
            slidesPerColumnFill: 'row', //多行布局中以什么形式填充：
            spaceBetween: 100, // slide之间的距离（单位px）。
      slidesPerGroup: 3,
      loop: true,
         
      loopFillGroupWithBlank: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    </script>
</body>
</html>
